<template>
    <div>
        <!-- 数据统计 -->
        <!-- 大容器 -->
        <section class="container">
            <!-- 左容器 -->
            <section class="itemLeft">
                <ItemPage>
                    <!-- 插入槽口 -->
                    <template #main>
                        <ItemOne />
                    </template>
                </ItemPage>
                <ItemPage>
                    <!-- 插入槽口 -->
                    <template #main>
                        <ItemTwo />
                    </template>
                </ItemPage>
            </section>

            <!-- 右容器 -->
            <section class="itemRight">
                <ItemPage>
                    <!-- 插入槽口 -->
                    <template #main>
                        <ItemThree />
                    </template>
                </ItemPage>
                <ItemPage>
                    <!-- 插入槽口 -->
                    <template #main>
                        <ItemFour />
                    </template>
                </ItemPage>
            </section>
        </section>
    </div>
</template>

<script setup>
import ItemPage from "../../components/ItemPage"
//引入图表
import ItemOne from "../../components/EchartsView/ItemOne.vue"
import ItemTwo from "../../components/EchartsView/ItemTwo.vue"
import ItemThree from "../../components/EchartsView/ItemThree.vue"
import ItemFour from "../../components/EchartsView/ItemFour.vue"
</script>
<style lang="scss" scoped>
// 主体容器样式
.container {
    // 这里就不需要设置使用rem了 使用rem那么页面就会根据html根结点大小改变而改变了
    width: 100%;
    margin: 0 auto;
    background-color: gray;
    display: flex;

    // 设置左中右的占比 但是不要忘了在父容器要设置flex
    .itemLeft,
    .itemRight {
        flex: 1;
    }
}
</style>